<template>
  <section>
    <div class="print"
         id="print"
         ref="print">
      <h1 class="title"><img v-if="data.store && data.store.logo"
             class="logo"
             :src="data.store.logo">{{data.store && data.store.storeName}}{{title}}<el-button class="no-print"
                   size="mini"
                   @click="print"><i class="el-icon-printer"></i> 打印</el-button>
      </h1>
      <el-form inline
               label-width="130">
        <el-form-item label="客户：">{{data.contactsName}}</el-form-item>
        <el-form-item label="电话：">{{data.contactsMobile}}</el-form-item>
        <el-form-item label="编码：">{{data.contactsCode}}</el-form-item>
      </el-form>
      <el-form inline
               label-width="130">
        <el-form-item label="单号：">{{data.orderNo}}</el-form-item>
        <el-form-item label="日期：">{{data.orderTime | filterDate}}</el-form-item>
        <el-form-item label="业务员：">{{data.saleName}}</el-form-item>
        <el-form-item label="业务手机：">{{data.saleMobile}}</el-form-item>
      </el-form>
      <ym-print-table :data="goodsList"
                      :options="options"></ym-print-table>
      <div class="summaries">合计金额：{{data.totalFee | parseFloatNum}}元（{{data.totalFee | filterTotalFeeCapitalize}}）</div>
      <div class="tips">
        <h2>尊敬的客户：</h2>
        <p>1)、提货时请点清数量、验收质量、出库后概不负责</p>
        <p>2)、若有任何质量问题请立即通知本公司，一经铺贴恕难负责</p>
        <p>3)、订货品不可退货，现货15日内包装完好可以退货</p>
      </div>
      <div class="bottom">
        <el-form inline
                 label-width="130">
          <el-form-item label="制单人：">{{data.staffName}}</el-form-item>
          <el-form-item label="送货人："></el-form-item>
          <el-form-item label="收货单位："></el-form-item>
        </el-form>
      </div>
    </div>
  </section>
</template>
<script>
import dayjs from 'dayjs'
import Vue from 'vue'
export default {
  name: 'ym-print',
  props: {
    title: {
      default: ''
    },
    goods: {
      type: Array,
      default: () => []
    },
    data: {
      type: Object,
      default: () => { }
    },
  },
  data () {
    return {
      options: {
        config: [{
          props: 'goodsName',
          label: "名称",
          width: '120'
        }, {
          props: 'sizeName',
          label: '规格',
          align: "center",
          width: "80"
        }, {
          props: 'barCode',
          label: '型号',
          align: "center",
          width: 70
        }, {
          props: 'singleCount',
          label: '装箱量',
          align: "center",
          width: "50"
        }, {
          props: 'count',
          label: '数量',
          align: "center",
          width: "60"
        }, {
          props: 'unitName',
          label: '单位',
          align: "center",
          width: "50"
        }, {
          props: 'price',
          label: '单价',
          align: "left",
          width: "60",
          render: (h, params) => {
            return (
              <span>{params.price ? `￥${params.price}` : ''}</span>
            )
          }
        }, {
          props: 'totalFee',
          label: '金额',
          align: "left",
          width: "70",
          render: (h, params) => {
            return (
              <span>{params.goodsName ? `￥${params.totalFee}` : ''}</span>
            )
          }
        }, {
          props: 'remark',
          label: '备注',
        }]
      },
      goodsList: []
    }
  },
  filters: {
    filterDate (v) {
      if (!v) return ''
      return dayjs.unix(v).format('YYYY-MM-DD')
    },
    filterTotalFeeCapitalize (v) {
      if (!v) return
      return Vue.filter('amountTransform')(v)
    },
    parseFloatNum (v) {
      if (!v) return v
      return parseFloat(v)
    }
  },
  watch: {
    data: {
      handler (v) {
        this.init()
      },
      deep: true
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      let goods = []
      let orderGoods = this.data.goods || []
      let maxLength = orderGoods.length
      goods = orderGoods.map(e => {
        return {
          ...e,
          price: this.parseFloatNum(e.price),
          totalFee: this.parseFloatNum(e.totalFee)
        }
      })
      if (maxLength < 7) {
        maxLength = 7 - orderGoods.length
        for (var i = 1; i <= maxLength; i++) {
          goods.push({})
        }
      }
      this.goodsList = goods
    },
    parseFloatNum (v) {
      if (!v) return v
      return parseFloat(v)
    },
    print () {
      this.$print(this.$refs.print)
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/assets/css/print.scss';
</style>
